<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1> {{title|safe}} </h1>
        <ul>
            <li v-for="(item, index) in users"> 
                 [[  index  ]] ------  name  : [[  item[0]  ]] ----- age : [[  item[1]  ]]
            </li>
        </ul>
        <ul>
            <li v-for="(item, index) in myList"> 
                 [[  index  ]] ===== [[  item  ]] 
            </li>
        </ul>
        <h3>[[  html_  ]]</h3>
        <h3  v-html="[[  html_  ]]"></h3>
        <h1> [[  title ]] </h1>
        <h1> 三种方式 : </h1>
        <h2>1:纯 h3</h2>
        <h3>  [[big_txt]]  </h3><hr>
        <h2> 2:white-space: pre-line; </h2>
        <h3 style="white-space: pre-line;  ">  [[big_txt]] </h3><hr>
        <h2>3:pre </h2>
        <pre style="font-size: 24px; ">    [[big_txt]]  </pre>


          

    </div>
</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js" type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.15/vue.global.min.js" type="application/javascript"></script>
<script>
    var data = "";
    var title = '{{ title|safe }}'
    console.log(title);

    var big_txt = '{{ big_txt|safe }}'
    console.log(big_txt);

    var myList = '{{ myList|safe }}'
    console.log(myList);

    const { createApp } = Vue
    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                test: "TEST-TEST",
                article: "{}",
                users: [
                    ["jack", 21, "true"],
                    ["tom", 17, "false"],
                    ["Anker", 26, "nullll"],
                ],
                html_: '<h1>  v-html  标签__:===+++---): </h1>',
                big_txt:big_txt,
                myList:JSON.parse(myList)
            }
        },
        methods: {
            add: function () {
                alert("哈哈哈哈 233333333")
            },
            get_: function () {
                // $.ajax的this作用域已经变了，所以要用一个变量接收 vue实例
                let this_ = this;
                var name = "威廉";
                var address = "西雅图";
                $.ajax({
                    type: "POST",
                    url: "/find_by_address/",
                    data: { "name": name, "address": address },
                    datatype: "json",
                    success: function (ret) {
                        // $('#result').text(ret.address)
                        this_.article = ret;  // 返回的是对象类型, 不是单纯的 string 
                        console.log(this_.article);
                    },
                    //调用出错执行的函数
                    error: function () {
                        //请求出错处理
                    }
                })
            }
        }
    }).mount('#app')

    function get_data(params) { }
    $(document).ready(function () { });

</script>
</html>